<template>
  <el-select
    v-model="factory"
    placeholder="请选择工厂"
    :disabled="disabled"
    clearable 
    filterable
    @change="handleChange"
  >
    <el-option
      v-for="el in factories"
      :key="el.deptId"
      :label="el.deptName"
      :value="el.deptCode"
    />
  </el-select>
</template>

<script setup name="FactorySelect">
import { getFactoryList } from "@/api/system/dept";
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
});
const { disabled } = toRefs(props);
const factory = defineModel();
const factoryName = defineModel("name");
const factories = ref([]);
const emit = defineEmits(["change"]);
function getFactories() {
  getFactoryList().then((res) => {
    factories.value = res.data;
  });
}
function handleChange(val) {
  for (let index = 0; index < factories.value.length; index++) {
    const el = factories.value[index];
    if (el.deptIdStr === val) {
      factoryName.value = el.deptName;
      emit("change", el);
      return;
    }
  }
}
getFactories();
</script>

<style lang="scss" scoped></style>
